<script setup lang="ts">
  import { ref, watch } from 'vue';

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    imgs: {
      type: Array,
      default: () => [],
    },
    bgColor: {
      type: String,
      default: 'var(--color-fill-1)',
    },
    uploader: {
      type: Object,
    }
  });
  const emits = defineEmits(['change', 'complete']);

  const imgList = ref<any[]>([]);

  watch(
    () => props.imgs,
    (newVal) => {
      imgList.value = newVal;
    },
    { immediate: true, deep: true }
  );
</script>

<template>
  <div class="md-photo-item" :style="{ backgroundColor: props.bgColor }">
    <div class="md-photo-item-title">
      <span style="font-size: 15px; font-weight: 600">{{ props.title }}</span>
    </div>
    <div class="md-photo-item-imgs">
      <a-upload 
        v-bind="uploader?.props" 
        @change="uploader?.handleChange" 
        @before-remove="uploader?.handleBeforeRemove" 
        image-preview 
      />
    </div>
  </div>
</template>

<style lang="less" scoped>
  .md-photo-item {
    padding: 10px 20px 14px;
    border-radius: 4px;
  }

  .md-photo-item-imgs {
    margin-top: 8px;
  }
</style>
